<!DOCTYPE html>
<html lang="en">
<head>
<title>activities</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link type="text/css" href="/css/gap.css" rel="stylesheet" />
<link type="text/css" href="/css/jquery.dataTables.css" rel="stylesheet" />
<link type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css"
   rel="stylesheet" />

</head>
<body>
   <div class="width9 center ui-widget">
      <!-- time_ms -->
      <div id="time_ms" class="center" style="text-align: center;">
         request(<label id="request_ms"></label>)
         template(<label id="template_gaps_ms"></label>)
         datatable(<label id="create_datatable_ms"></label>)
      </div>

      <!-- (html/json, user, version) selection -->
      <div class="ui-widget" class="width10">
         <div style="float: left" class="width2">
            <br />
            <input type="radio" id="dataType1" name="dataType" value="json" class="inline" />
            <label for="dataType1">json</label>
            <input type="radio" id="dataType2" name="dataType" value="html" class="inline" checked="checked" />
            <label for="dataType2">html</label>
         </div>
         <div style="float: left" class="width4">
            <label for="users_select">users</label>
            <select id="users_select" class="width10"></select>
         </div>
         <div style="float: right" class="width4">
            <label for="versions_select">versions</label>
            <select id="versions_select" class="width10"></select>
         </div>
      </div>

      <!-- date_range label -->
      <p class="ui-widget" style="clear: both">
         <label id="date_range"></label>
      </p>

      <!-- gaps table -->
      <div style="width: 100%; height: 100%">
         <table id="gaps-table" class="ui-widget-content">
            <thead>
               <th>id</th>
               <th>version</th>
               <th>description</th>
            </thead>
            <tbody>
            </tbody>
         </table>
      </div>
   </div>

    <!-- gaps/activities jqote2 template -->
   <script type="text/html" id="gaps-table-template">
    <![CDATA[
        <table id="gaps-table" class="ui-widget-content">
        <thead>
            <th style="width: 2%;">id</th>
            <th style="width: 2%;">version</th>
            <th style="width: 2%;">description</th>
            <% for (var i = 0; i < this.days.length; i++) {
                var alt = this.days[i][1] == 1;
                var dayf = this.days[i][0];
                if (alt) {%><th  day="<%= dayf %>" style="width: 1%; font-weight:bold"><%= dayf %></th>
                <% } else {%><th day="<%= dayf %>" style="width: 1%; font-weight:normal"><%= dayf %></th>
            <% }} %>
        </thead>
        <tbody>
            <% 
            for (var a in this.gaps) {
                var gap = this.gaps[a];
                var empty = gap.activities == null || gap.activities.length == 0;
                var empty_class = empty ? ' class="empty"' : '';
            %>
            <tr gap="<%= gap.id %>" style="height: 21px;"<%= empty_class %>>
                <td><a class="edit-gap" href="<%= gap.link %>"><%= gap.id %></a></td>
                <td style="text-align: center"><%= gap.version %></td>
                <td><%= gap.description %></td>
                <% 
                for (var i = 0; i < this.days.length; i++) { %>
                    <td style="text-align: center">
                    <% if (empty) { %>
                        <label class="editable_select"></label>
                    <% } else {
                        var dayf = this.days[i][0];
                        var indices = [];
                        this.activities.forEach(function(activity, index, array) { 
                            if (activity.day == dayf && activity.gap == gap.id) { 
                                indices.push(index); %>
                                <label class="editable_select" activity="<%= activity.link %>"><%= activity.time %></label>
                        <% }});
                        if (indices.length == 0) { %>
                            <label class="editable_select"></label>
                        <% } else {
                            indices.forEach(function(i) { this.activities.splice(i, 1); }, this);
                        }} %>
                    </td>
                <% } %>
            </tr>
            <% } %>
        </tbody>
        </table>
    ]]>
   </script>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

   <script src="/js/lib/jquery.dataTables-1.9.0.js"></script>
   <script src="/js/lib/jquery.dataTables.FixedColumns.min.js"></script>

   <script src="/js/lib/jquery.jeditable.js"></script>
   <script src="/js/lib/jquery.jqote2.min.js"></script>

   <script src="/js/lib/moment-1.5.0.min.js"></script>
   <script src="/js/activities.pagination.js"></script>
   <script src="/js/activities.js"></script>

</body>
</html>
